<template>
  <div class="current-time">
    <div class="time">{{ time }}</div>
    <div class="date">{{ date }}</div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "@vue/runtime-core";

export default defineComponent({
  name: "CurrentTime3D",
  setup() {
    const state = reactive({
      time: "",
      date: "",
    });

    const getCurrentTime = () => {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month > 9 ? month : `0${month}`;
      let day = date.getDate();
      day = day > 9 ? day : `0${day}`;
      let hour = date.getHours();
      hour = hour > 9 ? hour : `0${hour}`;
      let minute = date.getMinutes();
      minute = minute > 9 ? minute : `0${minute}`;
      let second = date.getSeconds();
      second = second > 9 ? second : `0${second}`;
      state.time = `${hour}:${minute}:${second}`;
      state.date = `${year}/${month}/${day}`;
      setTimeout(() => {
        getCurrentTime();
      }, 1000);
    };
    getCurrentTime();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.current-time {
  position: fixed;
  z-index: 100;
  top: 10px;
  right: 20px;
  line-height: 30px;
  font-size: 18px;
  letter-spacing: 2px;
  text-align: right;
  color: #fff;
  .time {
    font-size: 30px;
    letter-spacing: 4px;
    // color: #333;
  }
  .date {
    // color: #666;
    margin-top: 4px;
  }
}
</style>
